<!--
  * @Author: ws
  * @Date: 2023-12-29 15:14:29
  * @email: 458658538@qq.com
  * @LastEditors: ws
  * @LastEditTime: 2024-01-09 15:14:17
  * @Description: 
-->
<!--
  * @Author: ws
  * @Date: 2023-12-29 15:14:29
  * @email: 458658538@qq.com
  * @LastEditors: ws
  * @LastEditTime: 2023-12-29 16:44:51
  * @Description: 
-->
<template>
  <el-collapse v-bind="$attrs" class="collapse-panel">
    <el-collapse-item v-for="(item, index) in collapses" :key="index" :name="item.title">
      <template slot="title">
        <slot v-if="item.slotTitle" :name="item.slotTitle"></slot>
        <div v-else class="header-title">{{ item.title || "基本信息" }}</div>
      </template>
      <slot v-if="item.slotContent" :name="item.slotContent"></slot>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  name: "CollapsePanel",
  props: { collapses: { type: Array, default: () => [] } },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.collapse-panel {
  width: 100%;
  // height: 100%;
  border: unset;

  ::v-deep .el-collapse-item {
    border: unset;

    .el-collapse-item__header {
      height: 32px;
      padding: 0;
      background: rgba($color: #f1f2f5, $alpha: 0.5);
      border: unset;

      .header-title {
        position: relative;
        padding: 0;
        margin-left: 28px;
        font-size: 14px;
        // font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        line-height: 32px;
        color: #363f51;

        &::after {
          position: absolute;
          top: 8px;
          left: -12px;
          width: 4px;
          height: 16px;
          background: #1d7ff2;
          border-radius: 0 3px 3px 0;
          content: "";
        }
      }
    }

    .el-collapse-item__content {
      padding-bottom: unset;
    }

    .el-collapse-item__wrap {
      border: unset;
    }

    & + .el-collapse-item {
      margin-top: 10px;
    }
  }
}
</style>
